<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">城市等级配置</el-menu-item>
      <el-menu-item index="2">车辆类型配置</el-menu-item>
      <el-menu-item index="3">敏感词库</el-menu-item>
    </el-menu>
    <component :is="currentComponent"></component>
  </div>
</template>
<script>
import CityTier from "./CityTier.vue";
import VehicleType from "./VehicleType.vue";
import Lexicon from "./Lexicon.vue";

export default {
  name: 'Revenue',
  components: {
    CityTier,
    VehicleType,
    Lexicon
  },
  data() {
    return {
      activeIndex: '1',
      currentComponent: 'CityTier'
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      switch (key) {
        case '1':
          this.currentComponent = 'CityTier';
          break;
        case '2':
          this.currentComponent = 'VehicleType';
          break;
        case '3':
          this.currentComponent = 'Lexicon';
          break;
      }
    }
  }
};
</script>
<style>
</style>